<script setup lang="ts">
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue';
console.log("setup");
const count = ref(0)
onBeforeMount(() => {
  let div = document.querySelector("#hello")
  console.log("创建之前 ===> onBeforeMount", div);
})

onMounted(() => {
  let div = document.querySelector("#hello")
  console.log("创建完成 ===> onMounted", div);
})

onBeforeUpdate(() => {
  console.log("更新之前 ===> onBeforeUpdate");
})
onUpdated(() => {
  console.log("更新完成 ===> onUpdated");
})

onBeforeUnmount(() => {
  console.log("销毁之前 ===> onBeforeUnmount");
})

onUnmounted(() => {
  console.log("销毁完成 ===> onUnmount");
})
</script>

<template>
  <div id="hello">
    一个组件
  </div>
  <div>
    {{count}}
  </div>
  <button @click="count++">change</button>
</template>

<style>
</style>